<template>
  <!-- 文件下载 -->
  <div class="downloads">
    <!-- <button @click="downloads">下载</button> -->
    <a :href="aHref" :download="fileName" >{{ fileName }}</a>
    <span @click="isshowImg">预览</span>
    <img v-show="isshow" :src="aHref" class="Downloadimg" alt="" @click="isshowImg">
  </div>
</template>

<script>
import SERVER from '@/api/server'
import request from '@/utils/request'
export default {
  name: 'Downloads',
  props: {
    billId: Number,
    billType: Number
  },
  data() {
    return {
      fileName: '文件',
      aHref: '',
      htmls: '',
      isshow: false
    }
  },
  mounted() {
    this.downloads()
  },
  methods: {
    // 文件下载
    downloads() {
      const url = SERVER.DMSCLOUD_BASEDATA + '/file/billFiles/' + this.billType + '/' + this.billId
      return request.get(url, {
        fileType: Number(this.billType),
        billId: Number(this.billId)
      }).then(response => {
        const that = this
        const fileList = response.initialPreviewConfig
        const urls = response.initialPreview

        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            that.fileName = fileList[i].caption
          }
        }
        if (urls.length > 0) {
          for (let i = 0; i < urls.length; i++) {
            that.aHref = 'vue.basedata/' + urls[i]
          }
        }
      })
    },
    // 预览
    isshowImg() {
      this.isshow = !this.isshow
    }
  }
}
</script>

<style scope>
.Downloadimg{
    position: fixed;
    left: 32%;
    top: 25%;
    width: 50%;
}
</style>
